<template>
	<view class="President">
		<u-navbar :title="smallname" @leftClick="leftClick" :autoBack="true"></u-navbar>

		<view style=" overflow-y: scroll; margin-bottom: 40rpx;padding-top: 180rpx;box-sizing: border-box;padding-bottom: 150rpx;">
			<!-- 服务名称 -->
			<view class="President_item">
				<view class="President_item_title">服务项目</view>
				<view class="President_item_right">
					<view class="President_item_info">{{ form.service_name }}</view>
					<!-- 					<view class="President_item_expand">
						<image src="../../../static/right.png"></image>
					</view> -->
				</view>
			</view>
			<!-- 选择医院 -->
			<view class="President_item">
				<view class="President_item_title">就诊医院</view>
				<view class="President_item_right" @click="showHospital()">
					<view class="President_item_info">{{ form.hospital_name ? form.hospital_name : '请选择医院' }}</view>
					<view class="President_item_expand"><image src="../../../static/right.png"></image></view>
				</view>
			</view>
			<!-- 科室 -->
			<view class="President_item">
				<view class="President_item_title">就诊科室</view>
				<view class="President_item_right" @click="goDepartment()">
					<view class="President_item_info">{{ form.department_name ? form.department_name : '请选择服务科室' }}</view>
					<view class="President_item_expand"><image src="../../../static/right.png"></image></view>
				</view>
			</view>
			<!-- 期望就诊时间 -->
			<view class="President_item">
				<view class="President_item_title">就诊时间</view>
				<view class="President_item_right" @click="show = true">
					<view class="President_item_info">{{ time ? time_zhaunhuan(time) : '请选择就诊时间' }}</view>
					<view class="President_item_expand"><image src="../../../static/right.png"></image></view>
				</view>
			</view>
			<!-- 就诊人 -->
			<view class="President_item">
				<view class="President_item_title">就诊人</view>
				<view class="President_item_right" @click="Jen_jy">
					<view class="President_item_info">{{ form.patient_name ? form.patient_name : '请选择就诊人' }}</view>
					<view class="President_item_expand"><image src="../../../static/right.png"></image></view>
				</view>
			</view>

			<view class="subject">
				<view class="demand">服务需求</view>
				<view class="region"><u--textarea v-model="form.remark" border="none" placeholder="请输入您的服务需求" placeholder-style="font-size:26rpx;" /></view>
			</view>
			<view class="" style="margin-top: 15rpx;padding: 0rpx 30rpx;box-sizing: border-box;width: 686rpx;margin-left: 30rpx;font-weight: 300;font-size: 24rpx;">
				<text style="font-weight: 500 ; font-size: 30rpx;">注意事项</text>
				<view class="" style="margin-top: 15rpx;">1.仅支持当地医院的服务。</view>
				<view class="" style="margin-top: 15rpx;">2.本项服务为陪诊，不包含除此之外的其他服务及费用。</view>
				<view class="" style="margin-top: 15rpx;">
					3.下单成功后，因个人原因，就诊时间前12小时内取消订单-扣除5%服务费用，就诊时间前6小时内取消订单-扣除10%服务费用，就诊时间前3小时内取消订单-扣除50%服务费用，就诊时间前2小时内取消订单-扣除100%服务费用。
				</view>
			</view>
		</view>

		<view class="bottom_footer">
			<view class="bottom_footer_left">
				总计：
				<text>{{ '￥' + form.cost_price }}</text>
			</view>
			<view class="bottom_footer_right"><button type="default" class="button" @click="submit">立即购买</button></view>
		</view>
		<u-datetime-picker
			ref="datetimePicker"
			:show="show"
			v-model="form.reserve_time"
			:minDate="timestamp"
			mode="datetime"
			@cancel="show = false"
			@confirm="handleDateTimeConfirm"
		/>
		<!-- 日期 -->
		<!-- <u-calendar :show="show" @close="show = false"  v-model="form.reserve_time" @confirm.stop="handleDateTimeConfirm"></u-calendar> -->
		<!-- 科室 -->
		<u-picker :show="deptShow" :columns="departChildList" keyName="name" :closeOnClickOverlay="true" @cancel="deptShow = false" @confirm="handleDeptConfirm" />

		<u-picker :show="hospitalShow" :columns="list" keyName="name" :closeOnClickOverlay="true" @cancel="hospitalShow = false" @confirm="handleHospitalConfirm" />
	</view>
</template>

<script>
var _self;
export default {
	data() {
		return {
			isFirst: true,
			//倒计时
			s: 5,
			//医院选择展示
			hospitalShow: false,
			checked: false,
			//时间选择展示
			show: false,
			//科室选择展示
			deptShow: false,
			service: {},
			form: {},
			city: {},
			list: [],
			departChildList: [],
			state: 1, // 切换图片 state:进度条状态 1:填写订单 2:在线支付 3:预约挂号 4:服务完成
			// 时间戳
			timestamp: '',
			// 选择服务类型的id
			id: '',
			// 服务类型id
			fuwuTypeId: null,
			time: '',
			// 选择医院后的id
			hospital_id: '',
			mshow: false,
			smallname: '',
			type: 1,
			keyid: 0
		};
	},
	created() {
		_self = this;
	},
	onLoad(option) {
		// 选择五个圆圈服务类型后传过来的id

		this.smallname = option.smallname;
		if (option.id) {
			this.id = option.id;
		}
		if (option.service_id) {
			this.id = option.service_id;
		}
		if (option.hospital_id) {
			this.hospital_id = option.hospital_id;
		}
		this.keyid = option.id;
		this.datail();
	},
	mounted() {
		// let item = uni.getStorageSync('hospital')
		// this.form.hospital_name = item.name
	},
	onShow() {
		this.initAddress();
		this.init();
		this.postdepartment();
		this.isFirst = true;
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		datail() {
			let self = this;

			this.get('/api/service/detail', { id: self.keyid }).then(res => {
				self.form.cost_price = res.common_price;
				self.form.service_name = res.name;
			});
		},
		init() {
			if (uni.getStorageSync('./fillin')) {
				this.service = uni.getStorageSync('./fillin');

				let department = uni.getStorageSync('department');
				this.form = {
					user_id: uni.getStorageSync('user_id'),
					service_id: this.id ? this.id : this.service.pid,
					service_name: this.service.name ? this.service.name : this.service.service_name,
					cost_price: this.service.cost_price ? this.service.cost_price : '',
					hospital_id: this.service.hospital_id ? this.service.hospital_id : null,
					hospital_name: this.service.hospital_name ? this.service.hospital_name : '',
					patient_id: this.service.patient_id ? this.service.patient_id : null,
					patient_name: this.service.patient_name ? this.service.patient_name : '',
					reserve_time: this.service.reserve_time ? this.service.reserve_time : null,
					department_id: department.id ? department.id : null,
					department_name: department.name ? department.name : '',
					remark: this.service.remark ? this.service.remark : ''
				};
			}
			this.getHospitalList();
		},

		leftClick() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组

			if (routes.length <= 1) {
				console.log(routes.length, '是搜索');
				// this.gotoPage('/pages/index/index');
			} else {
				console.log(routes.length, '是搜索111');
				// uni.navigateBack(-1);
			}
		},
		// 获取指定地区的医院信息
		getHospitalList() {
			this.list = [];
			// 接口有问题暂时先注释 改好了在打开注释去掉上面的请求
			this.post('/api/Zrecduzp/huoquyongyouzhidingfuwuleixingdeiyiyuan', {
				service_id: this.keyid
			}).then(res => {
				this.list.push(res.data);
				if (this.form.hospital_id) {
					this.form.hospital_name = this.list[0].filter(item => item.id === this.service.hospital_id)[0].name;
				}
			});
		},
		// 选择确定医院
		handleHospitalConfirm(e) {
			this.form.hospital_id = e.value[0].id;
			this.hospital_id = e.value[0].hospital_id;
			this.form.hospital_name = e.value[0].name;
			this.hospitalShow = false;
			this.form.cost_price = e.value[0].common_price;
			this.postdepartment();
		},
		submit() {
			if (!this.form.hospital_id) {
				uni.showToast({
					title: '医院不能为空',
					icon: 'none'
				});
				return;
			}
			if (!this.form.patient_id) {
				uni.showToast({
					title: '就诊人不能为空',
					icon: 'none'
				});
				return;
			}
			if (!this.form.reserve_time) {
				uni.showToast({
					title: '就诊时间不能为空',
					icon: 'none'
				});
				return;
			}

			// if (!this.form.department_id) {
			// 	uni.showToast({
			// 		title: "科室不能为空",
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			this.form.service_id = this.keyid;
			this.post('/api/Qunvxckt/lizhijifu', this.form).then(res => {
				uni.requestPayment({
					privider: 'wxpay',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: function(payRes) {
						uni.removeStorageSync('./fillin');
						// 下单删除科室信息
						uni.removeStorageSync('department');
						uni.showToast({
							icon: 'none',
							title: '支付成功'
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/Order/Order'
							});
						}, 1000);
					},
					fail: function(err) {
						// 下单删除科室信息
						uni.removeStorageSync('./fillin');
						uni.removeStorageSync('department');
						uni.showToast({
							icon: 'none',
							title: '支付失败'
						});
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/Order/Order'
							});
						}, 1000);
					}
				});
			});
		},
		add0(m) {
			return m < 10 ? '0' + m : m;
		},
		btnClick(val) {
			this.type = val;
			console.log(val);
		},
		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time = new Date(shijianchuo);
			var y = time.getFullYear();
			var m = time.getMonth() + 1;
			var d = time.getDate();
			return y + '年' + this.add0(m) + '月' + this.add0(d) + '日';
		},
		//时间选择器点击确认
		handleDateTimeConfirm(e) {
			this.time = e.value;
			this.show = false;
			this.form.reserve_time = e;
		},
		// 科室以及科室名称
		handleDeptConfirm(e) {
			this.deptShow = false;
			this.form.department_id = e.value[0].id;
			this.form.department_name = e.value[0].name;
		},
		//时间展示格式化
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			if (type === 'hour') {
				return `${value}时`;
			}

			if (type === 'minute') {
				return `${value}分`;
			}

			return value;
		},
		//初始化地址
		initAddress() {
			if (uni.getStorageSync('city')) {
				this.city = uni.getStorageSync('city');
			} else {
				this.city = {
					text: '滨州市',
					value: 1513
				};
			}
		},
		Room() {
			if (this.form.hospital_name) {
				this.deptShow = true;
			} else {
				uni.showToast({
					title: '请先选择医院',
					icon: 'none'
				});
			}
		},
		postdepartment() {
			let that = this;
			that.timestamp = Date.parse(new Date());
			if (!this.form.hospital_id) {
				return;
			}
			this.post('/api/Zrecduzp/zhidinguyiyuandefukeshihuoqu', {
				hospital_id: this.form.hospital_id
			}).then(res => {
				let arr = [];
				for (let key in res) {
					console.log(res[key]);
					res[key].forEach(item => {
						arr.push({
							id: item.id,
							name: item.name
						});
					});
				}
				this.departChildList.push(arr);
			});
		},
		Jen_jy() {
			let service_id = this.id;
			// console.log(service_id, "跳转就诊人id");
			//刷新缓存
			uni.setStorageSync('./fillin', this.form);
			uni.navigateTo({
				// 传递当前选择的服务类型的id
				url: `../../My/Administration/patient?type=3&service_id=${service_id}`
				// url: `../../My/Administration/patient?type=3`
			});
		},
		// 去往科室页面
		goDepartment() {
			if (this.form.hospital_name) {
				uni.setStorageSync('./fillin', this.form);
				uni.navigateTo({
					url: `../department/department?hospital_id=${this.hospital_id}`
				});
			} else {
				uni.showToast({
					title: '请先选择医院',
					icon: 'none'
				});
			}
		},
		// 打开选择医院列表
		showHospital() {
			this.hospitalShow = true;
		}
	}
};
</script>

<style lang="scss">
// 文本域背景色
.u-textarea.data-v-09988a29 {
	background: #f9f9f9 !important;
}

.President {
	background-color: #f9f9f9;
}
.btnc {
	font-size: 18rpx;
	height: 50rpx;
	border: 1rpx solid #59d2b0;
	text-align: center;
	line-height: 50rpx;
	margin-right: 15rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	margin-top: 15rpx;
}
.active {
	background-color: #59d2b0;
	color: #ffffff;

	height: 50rpx;
	border: 1rpx solid #999999;
	text-align: center;
	line-height: 50rpx;
}
.President_item {
	width: 590rpx;
	height: 94rpx;
	margin: 15rpx auto;
	padding: 0 40rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	line-height: 94rpx;

	.President_item_title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}

	.President_item_right {
		display: flex;
		flex-wrap: nowrap;

		.President_item_info {
			font-size: 24rpx;
			color: #666666;
		}

		.President_item_expand {
			width: 38rpx;
			height: 84rpx;
		}
	}
}

.President_item2 {
	width: 590rpx;

	margin: 15rpx auto;
	padding: 0 40rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	line-height: 94rpx;

	.President_item_title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}

	.President_item_right {
		width: 75%;
		display: flex;
		flex-wrap: nowrap;

		.President_item_info {
			font-size: 24rpx;
			color: #666666;
		}

		.President_item_expand {
			width: 38rpx;
			height: 84rpx;
		}
	}
}
.President_item_expand image {
	width: 32rpx;
	height: 32rpx;
	margin-top: 38rpx;
	margin-left: 10rpx;
}

.President_item1 {
	// width: 590rpx;
	padding: 8rpx 40rpx;
	background: #fff;
	// box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);

	.President_item_title1 {
		font-size: 26rpx;
		font-weight: bold;
		color: #000000;
	}
	.President_item_right1 {
		display: flex;
		flex-wrap: nowrap;

		.President_item_info1 {
			font-size: 24rpx;
			color: #666666;
		}

		.President_item_expand1 {
			width: 38rpx;
			height: 84rpx;
		}
	}
}

.subject {
	height: 300rpx;
	margin-bottom: 40rpx;
	padding: 0 40rpx;
	background-color: #ffffff;
	border-radius: 20rpx;

	.demand {
		width: 128rpx;
		height: 42rpx;
		padding-top: 35rpx;
		line-height: 42rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}

	.region {
		background-color: #f9f9f9;
		margin-top: 20rpx;
		border-radius: 20rpx;
		height: 160rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.bottom_footer {
	width: 100%;
	height: 140rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;

	.bottom_footer_left {
		height: 48rpx;
		margin: 42rpx;
		color: #666666;
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.bottom_footer_right {
		margin: 20rpx 40rpx;
	}
}
.bottom_footer_left text {
	font-size: 36rpx;
	color: #fb4b6c;
	font-weight: bold;
}
.button {
	background-color: #59d2b0 !important;
	color: #ffffff !important;
	width: 220rpx;
	height: 90rpx;
	border-radius: 10rpx;
	font-size: 32rpx;
	line-height: 90rpx;
}
</style>
